<template>
  <div class="roleManager">


    <a-button type="primary" @click="addRole.visible = true">添加角色</a-button>

    <suspense>
      <role-list :roleData="roleData" @updateRoleData="getRoleList"></role-list>
    </suspense>
    <pagination :total="page.total" @updatePageSize="page.updatePageSize" @updateCurrentPage="page.updateCurrentPage"></pagination>

    <!--        添加角色对话框-->
    <a-modal
      v-model:visible="addRole.visible"
      title="添加角色"
      :confirm-loading="addRole.confirmLoading"
      @ok="addRole.handleOk"
    >
      <a-input v-model:value="addRole.roleName" placeholder="roleName">
        <template #prefix>
          <user-outlined type="user" />
        </template>
      </a-input>
    </a-modal>
  </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import roleList from "@/components/roleManager/roleList";
import pagination from '@/components/pagination/pagination'
export default {
  name: "roleManager.vue",
  components: {
    roleList,
    pagination
  },
  setup() {
    var { proxy } = getCurrentInstance();
    var roleData = reactive({
      count: 0,
      columns: [],
      data: [],
    });
    onMounted(() => {
      getRoleList(); //获取角色列表
    });
   
    function getRoleList() {
      //获取角色列表
      proxy
        .$request({
          url: "/role_admin/list",
          method: "get",
          params: {
            page: page.current,
            limit: page.pageSize,
          },
        })
        .then((res) => {
          page.total=res.data.data.count
          roleData.columns=[]
          roleData.data=[]

          res = res.data.data.list;
          roleData.data = res;
        
          for (let key in roleData.data[0]) {
            var obj = {};
            obj.key = key;
            obj.resizable = true;
            obj.title = key;
            obj.dataIndex = key;
            roleData.columns.push(obj);
          }
          roleData.data.forEach((el, index) => {
            el.key = index;
          });
          roleData.columns.push({
            key: "action",
            title: "action",
            dataIndex: "action",
            slots: {
              customRender: "action",
            },
          });
        });
    }


 var page=reactive({
      current:1,
      pageSize:20,
      total:0,
      updatePageSize:({pageSize,current})=>{
        page.pageSize=pageSize
         page.current=current
         getRoleList()
      },
      updateCurrentPage:({pageSize,current})=>{
        page.pageSize=pageSize
         page.current=current
         getRoleList()
      },
    })

    var addRole = reactive({
      visible: false,
      confirmLoading: false,
      roleName: "",
      handleOk: () => {
        (addRole.visible = false), (addRole.confirmLoading = false);
        if (addRole.roleName) {
          proxy
            .$request({
              url: "/role_admin/create",
              method: "post",
              data: {
                role_name: addRole.roleName,
              },
            })
            .then(
              (res) => {
                if(res.data.msg=='error') {
                  proxy.$message.error("添加失败");
                  return
                }

                 getRoleList()
                proxy.$message.success("添加成功");
               
              },
              (err) => {
                proxy.$message.error("添加失败");
              }
            );
        } else {
          proxy.$message.error("角色名不能为空");
        }
      },
    });

    return {
      addRole,
      roleData,
      getRoleList,
      page
    };
  },
};
</script>

<style scoped>
</style>